<script>
import ImageAvater from "../pageComponents/imageAvater.vue";
import {calendar} from "./calendar";

export default {
  name: "second_popup",
  components: {ImageAvater},
  data() {
    return {
      info: {},
      popupDeployment: {
        background: '#FFFFFF',
        isShowEdit: false
      },
      memberInfo: {},
      isShow: false
    }
  },
  props: {
    remarkFlag: {
      type: Boolean,
      default: true
    },
    editFlag: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    // 公历日期
    publicDate() {
      if (!!this.info) {
        if (this.info.type == 1) {
          if (!this.info.birthday) {
            return ''
          }
          let dt = calendar.lunar2solar(this.info.birthday.split('-')[0], this.info.birthday.split('-')[1], this.info.birthday.split('-')[2], this.info.isLeapMonth == 2 ? true : false)
          return this.$dayjs(dt.date).format('YYYY年MM月DD日')
        } else {
          if (!this.info.birthday) {
            return ''
          }
          return this.$dayjs(this.info.birthday).format('YYYY年MM月DD日')
        }
      }
    },
    // 阴历日期
    lunarDate() {
      if (!!this.info) {
        if (this.info.type == 1) {
          if (!this.info.birthday) {
            return ''
          }
          let dt = calendar.lunar2solar(Number(this.info.birthday.split('-')[0]), Number(this.info.birthday.split('-')[1]), Number(this.info.birthday.split('-')[2]), this.info.isLeapMonth == 2 ? true : false)
          return `(${dt.gzYear}年) ${dt.IMonthCn}${dt.IDayCn}`
        } else {
          if (!this.info.birthday) {
            return ''
          }
          let dt = calendar.solar2lunar(this.info.birthday.split('-')[0], this.info.birthday.split('-')[1], this.info.birthday.split('-')[2])
          return `(${dt.gzYear}年) ${dt.IMonthCn}${dt.IDayCn}`
        }
      }
    },
    IMG_URL() {
      return this.$store.state.shiqinStore.IMG_URL
    }
  },
  created() {
    uni.$on('setValue', (name) => {
      this.info.remark = name
    })
  },
  methods: {
    openPopup(obj) {
      console.log('选中的用户=>', obj)
      this.popupDeployment.background = !!obj.background ? obj.background : '#FFFFFF'
      this.popupDeployment.isShowEdit = !!obj.isShowEdit ? true : false
      this.info = !!obj.memberInfo ? obj.memberInfo : {}
      this.memberInfo = !!obj.selectInfo ? obj.selectInfo : {}
      this.info.uid = obj.uid
      this.$refs.second_popup.open()
      this.isShow = true
    },
    goChat(){
      uni.setStorageSync('CHATINFO', JSON.stringify(this.info))
      this.$nav.navigateTo('/pages/chat/index/index')
    },
    closePopup() {
      if (this.isShow) {
        this.$refs.second_popup.close()
        this.isShow = false
      }
    },
    // 跳转修改备注页面
    goEdit() {
      uni.setStorageSync('remarksInformation', JSON.stringify(this.memberInfo))
      // this.$nav.navigateTo('/pages/familyPage/modifyNote/index')
      this.$emit('goEdit', this.info)
    },
    setCilpText() {
      uni.setClipboardData({
        data: `尊姓大名：${this.info.username}
拾亲号：${this.info.sq_code}`,
        showToast: '复制成功'
      })
    },
  },
}
</script>

<template>
  <uni-popup ref="second_popup" :mask-click="false">
    <view class="second_popup" :style="{
      background:popupDeployment.background
    }">
      <view class="second_popup_background">
        <image :src="popupDeployment.background" class="second_popup_background_image" mode="widthFix"></image>
      </view>
      <view class="second_popup_icon">
        <image :src="`${IMG_URL}key.png`" class="second_popup_icon_image"></image>
      </view>
      <view class="second_popup_header row items-center pt-47">
        <text class="second_popup_header_text ml-41">查看信息</text>
        <image class="first_popup_header_image" :src="`${IMG_URL}popupClose.png`" mode="widthFix"
               @click="closePopup"></image>
      </view>
      <view class="second_popup_content allColumnCenter pb-47">
        <view class="second_popup_content_avatar row items-center mt-25" style="width: 470rpx;">
          <view>
            <image-avater :src="info.avatar" :width="165" :height="165" is-order :borderWidth="8"
                          borderColor="#FFFFFF"></image-avater>
          </view>
          <view class="row items-center">
            <view class="ml-20">
              <view class="second_popup_content_name row items-center">
                <text class="second_popup_content_name_text" style="white-space: nowrap;">{{ info.username }}</text>
                <view class="second_popup_content_card allRowCenter ml-15" v-if="remarkFlag">
                  <text class="second_popup_content_card_text">{{ !!info.remark ? info.remark : '未设置' }}</text>
                </view>
                <image :src="`${IMG_URL}edit_remark.png`" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"
                       v-if="popupDeployment.isShowEdit && editFlag" @click="goEdit"></image>
                <view class="second_popup_content_name_chat allRowCenter ml-15" @click.stop="goChat">
                  发消息
                </view>
              </view>
              <view class="second_popup_content_code row items-center">
                <text class="second_popup_content_code_text">拾亲号：{{ info.sq_code }}</text>
                <view class="familyEdit_familyName_left allRowCenter ml-10" @click="setCilpText">
                  <text class="familyEdit_familyName_left_text" style="color: #FF4206">复制</text>
                  <image class="familyEdit_familyName_left_image ml-4" :src="`${IMG_URL}replication.png`"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="second_popup_content_gap row items-center mt-35" style="height: 120rpx;">
          <text class="second_popup_content_gap_title ml-28">生日</text>
          <view class="column">
            <text class="second_popup_content_gap_content ml-35" style="line-height: 38rpx" :style="{
              color:info.type == 2 ? '#000000' : '#9F9F9F',
              fontSize:info.type == 2 ? '34rpx' : '30rpx'
            }">{{ publicDate }}
            </text>
            <text class="second_popup_content_gap_content ml-35" style="line-height: 38rpx" :style="{
              color:info.type == 1 ? '#000000' : '#9F9F9F',
              fontSize:info.type == 1 ? '34rpx' : '30rpx'
            }">{{ lunarDate }}
            </text>
          </view>
        </view>
        <view class="second_popup_content_gap row items-center mt-35" style="height: 80rpx;">
          <text class="second_popup_content_gap_title ml-28">属相</text>
          <text class="second_popup_content_gap_content ml-35">{{ info.animal }}</text>
        </view>
        <view class="second_popup_content_gap row items-center mt-35" style="height: 80rpx;">
          <text class="second_popup_content_gap_title ml-28">星座</text>
          <text class="second_popup_content_gap_content ml-35">{{ info.constellation }}</text>
        </view>
        <view class="second_popup_content_gap row items-center mt-35" style="height: 80rpx;">
          <text class="second_popup_content_gap_title ml-28">年龄</text>
          <text class="second_popup_content_gap_content ml-35">{{ info.age }}周岁</text>
        </view>
        <view class="second_popup_content_gap mt-35" style="padding: 20rpx 28rpx">
          <text class="second_popup_content_gap_title">签名：</text>
          <text class="second_popup_content_gap_content">{{
              !!info.autograph ? info.autograph : '这个人很懒，什么都没填写～'
            }}
          </text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.second_popup {
  width: 552rpx;
  //height: 725rpx;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  background: #FFFFFF;
  //overflow: hidden;
  position: relative;

  .second_popup_background {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;

    .second_popup_background_image {
      width: 100%;
    }
  }

  .second_popup_icon {
    position: absolute;
    top: 0;
    right: 0;

    .second_popup_icon_image {
      width: 147rpx;
      height: 147rpx;
    }
  }

  .second_popup_header {
    width: 552rpx;
    border-radius: 15rpx 15rpx 0rpx 0rpx;
    position: relative;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48rpx;
      color: #292929;
    }

    .first_popup_header_image {
      position: absolute;
      width: 65rpx;
      height: 65rpx;
      right: -20rpx;
      top: 13rpx;
      transform: translateY(-50%);
    }
  }

  .second_popup_content {
    margin: 0 41rpx;
    position: relative;

    .second_popup_content_name {
      //width: 470rpx;

      .second_popup_content_name_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #4B4B4B;
      }

      .second_popup_content_card {
        height: 30rpx;
        background: #FF7950;
        border-radius: 15rpx 15rpx 15rpx 15rpx;

        .second_popup_content_card_text {
          padding: 0 8rpx;
          white-space: nowrap;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
        }
      }

      .second_popup_content_name_chat {
        width: 98rpx;
        height: 38rpx;
        background: #FF4206;
        border-radius: 57rpx 57rpx 57rpx 57rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }

    .second_popup_content_code {
      //width: 470rpx;

      .second_popup_content_code_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #696969;
      }
    }

    .second_popup_content_avatar {
      //position: absolute;
      //right: 25rpx;
      //top: -35rpx;
    }

    .second_popup_content_gap {
      width: 470rpx;
      background: #F8F8F8;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .second_popup_content_gap_title {
        white-space: nowrap;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #4B4B4B;
      }

      .second_popup_content_gap_content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #9F9F9F;
      }
    }
  }
}

.familyEdit_familyName_left {
  .familyEdit_familyName_left_text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #9F9F9F;
  }

  .familyEdit_familyName_left_image {
    width: 34rpx;
    height: 34rpx;
  }
}
</style>